<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
import { delStarsImage, StarsImage, identifyResultInfo } from '@/utils/api.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import wlsCollect from "@/components/common/wls-collect.vue";
const route = useRoute();
const router = useRouter();
let imgInx = 0;
let areaId = '';
let mobile = '';
let sta = '';
const rblist = ref([]);
const coll = ref(null);
const bigim = ref({});
const isdetis = ref(false);
const totalElements = ref(0);
let pageNum = 1;
const currentPage = ref(1);

const getidentifyResultInfo = async () => {
    let name = route.query.species;
    let params = '?areaId=' + areaId + '&keywords=' + name + '&mobile=' + mobile + '&pageNum=' + pageNum + '&pageSize=18'
    let res = await identifyResultInfo(params)
    if (res.code == '200') {
        rblist.value = res.data.content;
        totalElements.value = res.data.totalElements;
    }
}

const collcr = (data) => {
    sta = data.id;
    if (data.starsStatus == 0) {
        coll.value.open()
    } else {
        let str = '是否取消收藏该文件. 继续?'
        ElMessageBox.confirm(
            str,
            '提示',
            {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning',
            }
        )
            .then(() => {
                let params = '?id=' + data.id + '&areaId=' + areaId + '&mobile=' + mobile;
                delStarsImage(params).then(res => {
                    if (res.code == '200') {
                        ElMessage({
                            type: 'success',
                            message: '取消收藏成功'
                        })
                        getidentifyResultInfo();
                    }
                })
            })
            .catch(() => {

            })
    }

}

const iscollect = (data) => {
    let params = {
        "folderId": data,
        "imageId": sta
    }
    StarsImage(params).then(res => {
        if (res.code == '200') {
            getidentifyResultInfo();
            coll.value.close()
        }
    })
}

const handleSizeChange = (val) => {
    pageNum = val;
    getidentifyResultInfo();
};


const lokrb = (data, index) => {
    bigim.value = data;
    imgInx = index;
    isdetis.value = true;

}

const Previous = () => {
    if (imgInx > 0) {
        imgInx--;
        bigim.value = rblist.value[imgInx];

    } else {
        ElMessage({
            message: '已经是第一张了',
            type: 'warning',
        })
    }

}

const NextPicture = () => {
    if (imgInx < rblist.value.length - 1) {
        imgInx++;
        bigim.value = rblist.value[imgInx];

    } else {
        ElMessage({
            message: '已经是最后一张了',
            type: 'warning',
        })
    }

}

onMounted(() => {
    areaId = window.sessionStorage.getItem('areaId');
    mobile = window.sessionStorage.getItem('mobile');
    getidentifyResultInfo();
})

onBeforeRouteLeave((to, from, next) => {
    // 在进入路由之前执行的逻辑操作
    // 可以进行一些权限验证、数据加载等操作
    let oldPath = to.path.split('/');
    let newPath = from.path.split('/')[1];
    if (oldPath.indexOf(newPath) == -1) {
        window.sessionStorage.removeItem('result');
    }
    next()
});
</script>
<template>
    <div class="wls-aut">
        <div class="wls-details-title">
            <!-- 标题 B-->
            <div class="wls-details-title">
                <div class="wls-details-title-txt">
                    <span>{{ route.query.name }}</span>
                    <span class="icon iconfont icon-xiala"></span>
                    <span>{{ route.query.species }}</span>
                    <!-- <span style="color: #333;margin-left: .24rem;">总计</span>
                    <div style="color: var(--wls-color);margin-left: 0.08rem;">23339845566张</div> -->
                </div>
            </div>
            <el-button @click.stop="router.go(-1)">返回</el-button>
            <!-- 标题 E-->
        </div>

        <div class="wls-details-container">
            <div class="bcb">
                <ul class="wls-empty">
                    <li class="bcb" v-for="(i, index) in rblist" :key="i.id" @click.stop="lokrb(i, index)">
                        <div class="wls-empty-img">
                            <div class="wls-empty-img-c wls-empty-img-collect" @click.stop="collcr(i)"
                                style="right: 0.08rem;">
                                <i class="icon iconfont icon-shoucang"
                                    :style="i.starsStatus == 0 ? '' : 'color:#FCD60F'"></i>
                            </div>
                            <video v-if="$wlsf.filiv(i.accessorySrc) == 4" :src="i.accessorySrc" alt=""></video>
                            <img v-else :src="i.accessorySrc" alt="">
                        </div>
                        <div class="wls-rd">
                            <div class="gradient-text">
                                <span :title="i.imageName">{{ i.imageName }}</span>
                            </div>
                            <div>
                                <span style="color: #AAA;">{{ i.shootingTime }}</span>
                            </div>
                        </div>
                    </li>
                </ul>

                <el-pagination v-model:current-page="currentPage" :page-size="18" :small="true" :disabled="false" background
                    layout="total, prev, pager, next, jumper" :total="totalElements" @current-change="handleSizeChange" />
            </div>
        </div>
        <wls-collect ref="coll" @submitfl="iscollect" />

        <!-- 详情 B-->
        <div class="l_details" v-if="isdetis">
            <div class="l_d_c">
                <div class="d-lkb-c" @click.stop="isdetis = false">
                    <i class="icon iconfont icon-guanbi" style="font-size: .3rem;"></i>
                </div>
                <div class="Species_title">
                    <div></div>
                    <span style="font-size: 0.18rem">查看详情</span>
                </div>
                <div class="l_d_c_t">
                    <span style="font-weight: 700;">{{ bigim.imageName }}</span>
                    <span style="color: #AAA;">{{ bigim.shootingTime }}</span>
                </div>
                <div class="l_d_c_b">
                    <div class="wls-authenticate-container-left-arrows" @click.stop="Previous()" style="left: 0.08rem;">
                        <svg class="wls-icon" style="width: 0.4rem;height: 0.4rem;" aria-hidden="true">
                            <use xlink:href="#icon-shangyizhang"></use>
                        </svg>
                    </div>
                    <div class="wls-authenticate-container-left-arrows" @click.stop="NextPicture()" style="right: 0.16rem;">
                        <svg class="wls-icon" style="width: 0.4rem;height: 0.4rem;" aria-hidden="true">
                            <use xlink:href="#icon-xiayizhang"></use>
                        </svg>
                    </div>
                    <video v-if="$wlsf.filiv(bigim.accessorySrc) == 4" :src="bigim.accessorySrc" controls alt=""></video>
                    <img v-else :src="bigim.accessorySrc" alt="">
                </div>
                <div class="wls-list-item">
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-wangge"></use>
                    </svg>
                    <span style="margin: 0 8px;color: #AAA;">网格编号:</span>
                    <span class="wls-list-span" title="网格编号">{{ bigim.oneKmGridNum }}</span>
                    <div class="wls-list-s"></div>
                    <svg class="wls-icon" aria-hidden="true">
                        <use xlink:href="#icon-biaozhu"></use>
                    </svg>
                    <span style="margin: 0 8px;color: #AAA;">经纬度:</span>
                    <span class="wls-list-span" title="海拔">{{ bigim.lon }}-{{ bigim.lat }}</span>

                </div>
            </div>
        </div>
        <!-- 详情 E -->

    </div>
</template>
<style scoped>
.wls-details-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem .1rem 0 .1rem;
    margin-bottom: 0.06rem;
}

.wls-details-title-txt {
    display: flex;
    align-items: center;
    color: #AAA;
}


.wls-details-title-txt>span:nth-child(2) {
    transform: rotate(-90deg);
    margin: 0 0.08rem;
}

.wls-details-title-txt>span:nth-child(3) {
    color: #333;
    font-weight: 700;
}

.wls-details-container {
    width: 100%;
    height: calc(100% - .5rem);
    padding: 0.1rem;
    display: flex;
}

.wls-details-container>div {
    width: 100%;
    height: 100%;
    padding: 0.24rem;
}

.wls-empty {
    width: 100%;
    padding: 3px;
    overflow: hidden;
}

.wls-empty>li {
    width: calc((100% - 0.8rem) / 6);
    height: 2.2rem;
    float: left;
    margin: 0 0.16rem 0.16rem 0;
}

.wls-empty>li:nth-child(6n) {
    margin-right: 0;
}

.wls-empty-img {
    width: 100%;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    position: relative;
}

.wls-empty-img img {
    width: 100%;
    height: 100%;
}

.wls-empty-img video {
    max-width: 100%;
    max-height: 100%;
}

.wls-empty-img-collect {
    width: 0.4rem;
    height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .5);
    cursor: pointer;
}

.wls-empty-img-c {
    color: #fff;
    position: absolute;
    top: 0.08rem;
    z-index: 3;
}

.wls-rd {
    width: 100%;
    height: 0.4rem;
    padding: 0 0.16rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gradient-text {
    width: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    /* 确保文本不换行 */
}

.l_details {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

.l_d_c {
    width: 10rem;
    /* height: 8rem; */
    padding: .24rem;
    border-radius: 4px;
    position: relative;
    background: #FFF;
    overflow: hidden;
}

.Species_title {
    display: flex;
    align-items: center;
}

.Species_title>div:nth-child(1) {
    width: 3px;
    height: 0.16rem;
    margin-right: 8px;
    background-color: var(--wls-color);
}

.l_d_c_t {
    width: 100%;
    margin: .16rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.l_d_c_b {
    width: 100%;
    height: 6rem;
    background-color: #AAA;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.l_d_c_b img,
.l_d_c_b video {
    max-width: 100%;
    max-height: 100%;
}


.wls-list-item {
    width: 100%;
    margin: .16rem 0;
    display: flex;
    align-items: center;
    color: #606266;
    margin-bottom: 0.08rem;
    overflow: hidden;
}

.wls-list-span {
    display: inline-block;
    margin-left: 0.08rem;
    line-height: 2;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.wls-list-s {
    width: 1px;
    height: 0.18rem;
    margin: 0 .24rem;
    background-color: #DCDFE6;
}

.wls-authenticate-container-left-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
}
</style>